{include file="public/layout" /}
<body class="laytp-container">
<!--
本「综合演示」包含：自定义头部工具栏、获取表格数据、表格重载、自定义模板、单双行显示、单元格编辑、自定义底部分页栏、表格相关事件与操作、与其他组件的结合等相对常用的功能，以便快速掌握 table 组件的使用。
-->

<div class="layui-card" id="search-form">
    <div class="layui-card-body">
      <form class="layui-form layui-row layui-col-space16">
    <div class="layui-col-md2">
      <div class="layui-input-wrap">
        <input type="text" name="user_id" value="" placeholder="会员ID" class="layui-input" lay-affix="clear">
      </div>
    </div>
    <div class="layui-col-md2">
      <div class="layui-input-wrap">
        <input type="text" name="username" placeholder="会员编号" lay-affix="clear" class="layui-input">
      </div>
    </div>
    <div class="layui-col-md2">
      <div class="layui-input-wrap">
        <select name="level">
          <option value="">选择会员级别</option>
          {foreach $jjlevel as $rank=>$level_name}
            <option value="{$rank}">{$level_name}</option>
          {/foreach}
        </select>
      </div>
    </div>
    <div class="layui-col-md2">
      <div class="layui-input-wrap">
        <select name="level1">
          <option value="">选择管理级别</option>
          {foreach $jjlevel1 as $rank=>$level_name}
            <option value="{$rank}">{$level_name}</option>
          {/foreach}
        </select>
      </div>
    </div>
    <div class="layui-col-md2">
      <div class="layui-input-wrap">
        <select name="bonus_type">
          <option value="">奖金类型</option>
          {foreach $prize as $prize_key=>$prize_name}
            <option value="{$prize_key}">{$prize_name}</option>
          {/foreach}
        </select>
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">结算时间</label>
      <div class="layui-inline" id="laydate-rangeLinked">
        <div class="layui-input-inline">
          <input type="text" name="time_start" autocomplete="off" id="table-search-date-start" class="layui-input" placeholder="开始日期">
        </div>-
        <div class="layui-input-inline">
          <input type="text" name="time_end" autocomplete="off" id="table-search-date-end" class="layui-input" placeholder="结束日期">
        </div>
      </div>
    </div>
    <div class="layui-inline">
      <button class="layui-btn" lay-submit lay-filter="demo-table-search">搜索</button>
      <button type="reset" class="layui-btn layui-btn-primary">清空</button>
    </div>
  </form>
    </div>
</div>
<div class="layui-card">
  <div class="layui-card-body">
    <table class="layui-hide" id="test" lay-filter="test"></table>
  </div>
</div>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" onclick="reload()">
      刷新数据
    </button>
<!--    <button class="layui-btn layui-btn-sm" onclick="del()">-->
<!--      批量删除-->
<!--    </button>-->
    <button class="layui-btn layui-btn-sm" data-form-export="{:url('index')}">
      导出数据
    </button>

  </div>
</script>
<script type="text/html" id="barDemo">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="more">
      更多
      <i class="layui-icon layui-icon-down"></i>
    </a>
  </div>
</script>
<script>
  var tableIns
  var datawhere
  layui.use(function(){
    var table = layui.table;
    var dropdown = layui.dropdown;
    var laydate = layui.laydate;
    var form = layui.form;

    // 创建渲染实例
    tableIns = table.render({
      elem: '#test',
      url:'{:url("index")}', // 此处为静态模拟数据，实际使用时需换成真实接口
      toolbar: '#toolbarDemo',
      defaultToolbar: ['filter', 'exports', 'print', {
        title: '提示',
        layEvent: 'LAYTABLE_TIPS',
        icon: 'layui-icon-tips'
      }],
      height: 'full-200', // 最大高度减去其他容器已占有的高度差
      css: [ // 重设当前表格样式
        '.layui-table-tool-temp{padding-right: 145px;}'
      ].join(''),
      cellMinWidth: 80,
      totalRow: true, // 开启合计行
      page: true,
      pagebar: '#test-pagebar', // 分页栏模板
      cols: [[
        {type: 'checkbox', fixed: 'left'},
        {field:'id', fixed: 'left', width:80, title: 'ID', sort: true, totalRowText: '合计：'},
        {field:'user_id', width:80, title: '会员ID',totalRowText: ''},
        {field:'username', width:80, title: '会员编号',totalRowText: ''},

        {field:'bonus_type_name', width:80, title: '奖金类型',totalRowText: ''},
        {field:'riqi', width:80, title: '日期',templet:function(d){ return date('Y-m-d',d.riqi)}},
        {field:'level_name', width:80, title: '级别',totalRowText: ''},
        {field:'level1_name', width:80, title: '管理级别',totalRowText: ''},
        {field:'ff_time', width:80, title: '应发放日期',templet:function(d){ return date('Y-m-d H:i',d.ff_time)}},
        {field:'status_str', width:80, title: '发放状态',totalRowText: ''},
        // {field:'status', width:80, title: '发放状态',templet:function(d){
        //     if(d.status == 1){
        //       return '已发放';
        //     }else{
        //       return '未发放';
        //     }
        // }},
        {field:'bonus', width:80, title: '总奖金',totalRow: '{{=d.TOTAL_ROW.total_money}}'},
        {field:'w_time', width:80, title: '结算时间',templet:function(d){ return date('Y-m-d H:i',d.w_time)}},
        {field:'memo', width:150, title: '备注',totalRowText: ''},
        {field:'order_time', width:80, title: '下单时间',totalRowText: ''},
        {field:'data_id', width:80, title: '来源订单id',totalRowText: ''},
        // {field:'total_pv', width:80, title: '来源订单PV',totalRowText: ''},
        {field:'order_username', width:80, title: '来源订单会员',totalRowText: ''},
        {field:'guanli', width:100, title: '管理费',totalRowText: ''},
        {field:'gouwuquan', width:100, title: '{$wallet_names["gouwuquan"]}',totalRowText: ''},
        {field:'shouyi', width:100, title: '{$wallet_names["shouyi"]}',totalRowText: ''},
        // {fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
      ]],
      error: function(res, msg){
        console.log(res, msg)
      }
    });

    // 触发单元格工具事件
    table.on('tool(test)', function(obj){ // 双击 toolDouble
      var data = obj.data; // 获得当前行数据
      // console.log(obj)
      if(obj.event === 'edit'){
        layer.open({
          title: '编辑 - id:'+ data.user_id,
          type: 2,
          shadeClose: true,
          area: ['100%','100%'],
          scrollbar:false,
          content: '{:url("detail")}/id/'+data.user_id
        });
      } else if(obj.event === 'more'){
        // 更多 - 下拉菜单
        dropdown.render({
          elem: this, // 触发事件的 DOM 对象
          show: true, // 外部事件触发即显示
          data: [{
            title: '查看',
            id: 'detail'
          },{
            title: '删除',
            id: 'del'
          }],
          click: function(menudata){
            if(menudata.id === 'detail'){
              layer.msg('查看操作，当前行 ID:'+ data.id);
            } else if(menudata.id === 'del'){
              layer.confirm('真的删除行 [id: '+ data.id +'] 么', function(index){
                obj.del(); // 删除对应行（tr）的DOM结构
                layer.close(index);
                // 向服务端发送删除指令
              });
            }
          },
          align: 'right', // 右对齐弹出
          style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
        })
      }
    });

    laydate.render({
      elem: '.demo-table-search-date'
    });
    laydate.render({
      elem: '#laydate-rangeLinked',
      type: 'datetime',
      range: ['#table-search-date-start', '#table-search-date-end'],
      rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
    });
    // 搜索提交
    form.on('submit(demo-table-search)', function(data){
      var field = data.field; // 获得表单字段
      // 执行搜索重载
      table.reload('test', {
        page: {
          curr: 1 // 重新从第 1 页开始
        },
        where: field // 搜索的字段
      });
      //layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
      return false; // 阻止默认 form 跳转
    });
  });
  function reload(){
    layui.table.reload('test', {
      where: {
        abc: 123,
        test: '新的 test1'
      },
      // scrollPos: 'fixed',  // 保持滚动条位置不变 - v2.7.3 新增
      // height: 2000, // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
      //url: '404',
      //page: {curr: 1, limit: 30} // 重新指向分页
    }, true);
  }
  function del(){
    var checkStatus = layui.table.checkStatus('test');
    var data = checkStatus.data;
    layer.alert(layui.util.escape(JSON.stringify(data)));
  }
  function excel(){

  }
</script>
</body>
</html>